<style scoped>
.wraper {
    padding: 0 30px;
}

.search {
    padding-bottom: 20px;
}

.search span {
    color: #68777c;
    font-weight: bold;
    padding-right: 18px;
}

.search button {
    background-color: #00a8f7;
    color: #fff;
    margin-left: 8px;
}

.top {
    margin-bottom: 20px;
    border-top: 1px dashed #cccccc;
}

.detail {
    border-top: 1px dashed #cccccc;
}

.wraper .headline {
    position: relative;
    font-size: 12px;
    color: #303134;
    font-weight: bold;
    margin: 10px 0;
    line-height: 32px;
}

.wraper .add-agent {
    position: absolute;
    top: 0px;
    right: 30px;
    background-color: #348bf2;
    color: #fff;
}

.iconfont {
    font-size: 14px;
}

.red-font {
    color: #ff1f1f;
}



h2 {
    font-size: 16px;
    margin-bottom: 20px;
    display: inline-block;
}

.wrap {
    padding: 30px;
    clear: both;
    border-bottom: 1px solid #dddee1;
}

.formdiv {
    clear: both;
    margin-bottom: 20px;
}

.mt20 {
    margin-top: 20px;
}

.mb20 {
    margin-bottom: 20px;
}
.line{
    margin-top: 20px;
    margin-bottom: 20px;
    width: 100%;
    height: 1px;
    border-bottom: 1px dotted #dddee1;
}
.plan{
    background-color: #edf2f6;
    overflow: hidden;
    height: 100%;
}
.plan-l{
    width: 75%;
    float: left;
    background-color: #fff;
}
.plan-r{
    width: 25%;
    float: left;
}
.insertpro-content{
    margin: -16px;
    background-color: #cfebf9;
}
.insertpro-l{
    background-color: #f2f2f2;
}
.insertpro-r{
    background-color: #cfebf9;
    padding: 20px;
}
.insertpro-l-t{
    padding-top: 25px;
    padding-bottom: 25px;
    padding-right: 15px;
    overflow: hidden;
}
.insertpro-select{
    width: 135px;
    height: 40px;
    line-height: 40px;
    float: left;
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    font-size: 14px;
    color: #5b5b5b;
}
.insertpro-input{
    margin-left: 135px;
}
.insertpro-l-b{
    background-color: #fff;
    height: 425px;
    overflow: auto;
    padding: 15px 30px;
}
.insertpor-type{
    margin-bottom: 20px;
}
.insertpor-type a{
    display: inline-block;
    font-size: 12px;
    padding: 8px 14px;
    background-color: #eee;
    color: #1f90c8;
    margin-right: 5px;
    border-radius: 16px;
}
.insertpor-type a.active{
    background-color: #1f90c8;
    color: #fff;
}
.insertpro-list ul li a{
    display: block;
    font-size: 14px;
    padding: 12px 45px 12px 18px;
    border: 1px solid #cfebf9;
    border-radius: 4px;
    color: #333;
    margin-bottom: 3px;
}
.insertpro-list ul li a span{
    float: right;
    color: #8f8f8f;
    font-size: 12px;
    max-width: 210px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.insertpro-list ul li a:hover{
    background-color: #1f90c8;
    color: #fff;
}
.insertpro-list ul li a:hover span{
    color: #fff;
}
.insertpro-r h3{
    font-size: 16px;
    color: #333;
    font-weight: normal;
}
.insertpro-selected-list{
    background-color: #fff;
    margin-top: 15px;
    margin-bottom: 15px;
}
.insertpro-selected-list ul{
    border: 1px solid #e6eaed;
}
.insertpro-selected-list ul li {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e6eaed;
    overflow: hidden;
}
.insertpro-selected-list ul li a{
    display: block;
    margin-right: 50px;
    padding-left: 15px;
    color: #333333;
    font-size: 14px;
    overflow: hidden;
}
.insertpro-selected-list ul li span{
    display: block;
    float: right;
    width:50px;
    border-left:1px solid #e6eaed;
    text-align: center;
    color: red;
    cursor: pointer;
}
.company-model{
    margin: -16px;
    overflow: hidden;
}
.all-company{   
    margin-right: -36px;
    padding: 15px 0 15px 15px;
    background-color: #f2f2f2;
    height: 555px;
    overflow: auto;
}
.all-company a{
    display: inline-block;
    width: 143px;
    height: 45px;
    line-height: 45px;
    margin-right: 20px;
    margin-bottom: 15px;
    text-align: center;
    overflow: hidden;
    color: #000;
    font-size: 14px;
    background-color: #fff;
    border-radius: 5px;
}
.all-company a:hover{
    background-color: #2db7f5;
    color: #fff;
}
.all-company a.active{
    background-color: #2db7f5;
    color: #fff;
}
.selected-company{
    margin-right: 15px;
}
</style>
<style>
.clearfix:after {
    visibility: hidden;
    display: block;
    content: " ";
    clear: both;
    height: 0;
    line-height: 0;
}
.insertpro-input input{
    height: 40px ;
}
.clearfix {
    zoom: 1;
}
.searchpro-btn .ivu-input-group-append{
    background-color: #4074e1;
    border: 1px solid #4074e1;
    color: #fff;
}
</style>

<template>
    <div class="plan">
        <div class="plan-l">
            <div class="policy-edit">
            
            
                <product-title></product-title>
                               
                <!-- 被保人 -->
                <div class="wrap" v-for="(item,index) in plan" :key="index">
                    <h2>
                        被保人信息
                    </h2>
                    <Form class="formdiv clearfix"  :label-width="140">
                        <Row>
                            <Col span="23" offset="1">
                            <Tag type="dot" closable color="red" @on-close="insuredRemove(pindex)">删除被保人</Tag>
                            <Button type="text" style='color:blue' @click='insertInsured(pindex)'>导入被保人</Button>
                            <br/><br/>
                            </Col>
                        </Row>
                        <Row>                   
                            <Col span="5" offset="1">
                                <Form-item label="性别：" required>
                                    <Select  style="width:200px">
                                        <Option v-for="sitem in item.sex" :value="sitem.value" :key="sitem.value">{{ sitem.label }}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="5" offset="1">
                                <Form-item label="关系：" required>
                                    <Select  style="width:200px">
                                        <Option v-for="sitem in item.relation" :value="sitem.value" :key="sitem.value">{{ sitem.label }}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                            <Col span="5" offset="1">
                                <Form-item label="年龄：" required>
                                    <Select  style="width:200px">
                                        <Option v-for="sitem in item.relation" :value="sitem.value" :key="sitem.value">{{ sitem.label }}</Option>
                                    </Select>
                                </Form-item>
                            </Col>
                        </Row>
                                                                                    
                        <Row>
                            <Col span="23" offset="1">
                                <div class="line"></div>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="5" offset="0">
                                <h2>
                                    险种参数
                                </h2>
                            </Col>
                            <Col span="4" offset="15">
                                <Button type="info" long @click="showPro(pindex)" icon="plus-round">新增险种</Button>
                            </Col>
                        </Row>
                        <Row v-for="(citem, cindex) in item.insurance" :key="cindex">
                            <Col span="23" offset="1">
                            <Tag type="dot" closable color="red" @on-close="insuredRemove(pindex)">百万畅行两全保险</Tag>                           
                            </Col>
                            <Col span="8" offset="1">
                            <FormItem label="险种名称：" required>
                                <Input type="text" v-model="citem.insuranceName" placeholder="请输入险种名称"></Input>
                            </FormItem>
                            </Col>
                            <Col span="8" offset="1">
                            <FormItem label="保险期间：" required>
                                <Input type="text" v-model="citem.insurancePeriod" placeholder="请输入保险期间"></Input>
                            </FormItem>
                            </Col>
                            <Col span="8" offset="1">
                            <FormItem label="交费方式：" required>
                                <Input type="text" v-model="citem.payType" placeholder="请输入交费方式"></Input>
                            </FormItem>
                            </Col>                  
                            <Col span="8" offset="1">
                            <FormItem label="交费期间：" required>
                                <Input type="text" v-model="citem.payPeriod" placeholder="请输入交费期间"></Input>
                            </FormItem>
                            </Col>
                            <Col span="8" offset="1">
                            <FormItem label="保险金额(元)/档次/日额(元/天)：" :label-width='240' required>
                                <Input type="text" v-model="citem.amount" placeholder="请输入保额"></Input>
                            </FormItem>
                            </Col>
                            <Col span="8" offset="1">
                            <FormItem label="保费：" required>
                                <Input type="text" v-model="citem.rate" placeholder="请输入保费"></Input>
                            </FormItem>
                            </Col>
                            <Col span="8" offset="1">
                            <FormItem label="生效日期：" required>
                                <DatePicker type="date" style="width: 240px" v-model="item.inception_date" format="yyyy-MM-dd HH:mm:ss" @on-change="(datetime) =>{ insureInceptionDateChange(datetime, pindex,index)}" placeholder="选择日期"></DatePicker>
                            </FormItem>
                            </Col>
                            <Col span="8" offset="1">
                            <FormItem label="状态：" required>
                                <Input type="text" v-model="item.status" placeholder="请输入状态"></Input>
                            </FormItem>
                            </Col>
                                                   
                            
                            <Col span="15" offset="9">
                            <Button type="error" @click="proRemove(pindex,index)">删除险种</Button>
                            </Col>
                            <Col span="17" offset="1">
                                <div class="line"></div>
                            </Col>
                        </Row>
                        <FormItem>
                            <Row>
                                <Col span="4">
                                
                                </Col>
                            </Row>
                        </FormItem>
                    </Form>
                    
                    <div>
                        <Row>
                            <Col span="6" offset="7">
                            <Button type="primary" long @click="insuredAdd()" icon="plus-round">新增被保人</Button>
                            </Col>
                        </Row>
                    </div>
                </div>
            
                <Row class="mt20 mb20">
                    <Col span="6" offset="8">
                    <Button type="primary" @click="handleSubmit()">提交</Button>
                    </Col>
                </Row>
            </div>
            
        </div>
        <div class="plan-r"></div>
        <Modal v-model="insertproModal" width="1000" title="添加产品">      
            <Row class="insertpro-content">
                <Col span="16">
                    <div class="insertpro-l">
                        <div class="insertpro-l-t">
                            <a class="insertpro-select" href="javascript:;"><span @click="selectCompany" class="selected-company">{{com_name}}</span><Icon type="ios-arrow-down" size="14"></Icon></a>
                            <div class="insertpro-input">
                                <Input class="searchpro-btn" v-model="keyword" >
                                   <Button slot="append"  type="primary">搜索</Button>
                                </Input>
                            </div>                           
                        </div>
                        <div class="insertpro-l-b">
                            <div class="insertpor-type">
                                <a :class="type_code==0?'active':''" href="javascript:;" @click="toogleType_code(0)">全部</a><a :class="type_code==1?'active':''" href="javascript:;" @click="toogleType_code(1)">意外</a><a :class="type_code==2?'active':''" href="javascript:;" @click="toogleType_code(2)">医疗</a><a :class="type_code==3?'active':''" href="javascript:;" @click="toogleType_code(3)">重疾</a><a :class="type_code==4?'active':''" href="javascript:;" @click="toogleType_code(4)">寿险</a><a :class="type_code==5?'active':''" href="javascript:;" @click="toogleType_code(5)">理财</a>
                            </div>
                            <div class="insertpro-list">
                                <ul>
                                    <li v-for="(item,index) in prolist" :key="item.id" >
                                        <a href="javascript:;" :title="item.period">
                                            {{item.name}}
                                            <span>承保年龄：{{item.limit_age_name}}  保障期间：{{item.period}}</span>
                                        </a>
                                    </li>                               
                                </ul>
                            </div>
                        </div>
                    </div>
                </Col>
                <Col span="8">
                    <div class="insertpro-r">
                        <h3>已经选择险种</h3>

                        <div class="insertpro-selected-list">
                            <ul>
                                <li>
                                    <span>删除</span>
                                    <a href="">
                                        泰康尊享世家终身寿险泰康尊享世家终身寿险泰康尊享世家终身寿险泰康尊享世家终身寿险
                                    </a>                                           
                                </li>                               
                            </ul>
                        </div>
                        <Button type="warning" size="large" long>确定</Button>

                    </div>
                </Col>
            </Row>                              
            <div slot="footer" class="hidden">
            </div>
        </Modal>
        <Modal v-model="companyModal" width="1000" title="选择公司">
            <div class="company-model">            
                <div class="all-company">                  
                    <a v-for="(item,index) in companyList" :key="item.cid":class="item.cid==com_id?'active':''" @click="changeCompany(item.cid,item.shortn)" href="javascript:;">{{item.shortn}}</a>                  
                </div>
            </div>
            <div slot="footer" class="hidden">
            </div>
        </Modal>

    </div>
</template>

<script>
import productTitle from '../../components/productTitle'
import { getCompanyList, getProList } from '../../api/plan';
export default {
    data() {
        return {
            insertproModal:false,
            companyModal:false,
            searchType:0,
            plan:[
                {
                    sex:[
                        {
                            value: '1',
                            label: '男'
                        },
                        {
                            value: '0',
                            label: '女'
                        }
                    ],
                    relation:[
                        {
                            value: '本人',
                            label: '本人'
                        },
                        {
                            value: '配偶',
                            label: '配偶'
                        },
                        {
                            value: '父母',
                            label: '父母'
                        },
                        {
                            value: '子女',
                            label: '子女'
                        },
                        {
                            value: '其他',
                            label: '其他'
                        }
                    ],
                    insurance:[

                    ]
                }
            ],
            companyList:[
                
            ],
            prolist:[

            ],
            keyword:'',
            type_code:0,
            com_id:0,
            com_name:'全部公司',           
            inceptionDate:'',
            modalSearch:{},
            policyDetail: {
                applicant: {

                },
                insured: [
                    {
                        benefit: [
                            {
                                benefitName: '',
                                benefitShare: '',
                                benefitOrder: ''
                            }
                        ],
                        insurance: [
                            {
                                insuranceName: '',
                                insurancePeriod: '',
                                amount: '',
                                payPeriod: '',
                                rate: '',
                                commission_rate: '',
                                interest:[
                                    {
                                        interestName:'',
                                        interestMoney:''
                                    }
                                ]

                            }
                        ]
                    }
                ]
            },
            insertModal:false,
            insertType:1,    //1:投保人，2：被保人 3：受益人
            insertinsuredIndex:0,  //导入数据的被保人在数组中的下标
            insertBenefitIndex:0,  //导入数据的受益人在数组中的下标
            ruleValidate: {
                num: [
                    { required: true, message: '保单编号不能为空', trigger: 'blur' }
                ],
                name: [
                    { required: true, message: '险种名称不能为空', trigger: 'blur' },
                ],
                cname: [
                    { required: true, message: '公司名称不能为空', trigger: 'change' }
                ],
                agent_code: [
                    { required: true, message: '投保人编号不能为空', trigger: 'change' }
                ],
                // pay_period: [
                //     { required: true, message: '缴费期间不能为空', trigger: 'change' }
                // ],
                start_date_format: [
                    { required: true, type: 'date', message: '生效日期不能为空', trigger: 'change' }
                ],
                // rate: [
                //     { required: true, message: '保费不能为空', trigger: 'change' }
                // ],
                // commission_rate: [
                //     { required: true, message: '佣金系数不能为空', trigger: 'change' }
                // ],
            },
            columns_customer:[
                {
                    title: '姓名',
                    key: 'true_name',
                    width: 110,
                    align: 'center'
                },
                {
                    title: '手机号',
                    key: 'mobile',
                    width: 120,
                    align: 'center'
                },
                {
                    title: '身份证号',
                    key: 'id_card',
                    width: 210,
                    align: 'center'
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                    width: 110,
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                on:{
                                    click:() => {
                                        this.insertData(params.row.true_name,params.row.mobile,params.row.id_card);
                                    }
                                }
                            }, '添加'),
                        ]);
                    }
                }
            ],
            data_customer:[
                
            ],
        }
    },
    components: {
        productTitle
    },
    created() {
        // this.getDetail();
        // this.getCustomer();
        this.getPro();
        this.getCompany();
    },
    methods: {
        getCompany() {
            new Promise((resolve, reject) => {
                getCompanyList().then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        this.companyList = response.data.data;
                    } else {
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        getPro(){
            let _params = {
                keyword:this.keyword,
                type_code:this.type_code,
                com_id:this.com_id
            }
            new Promise((resolve, reject) => {
                getProList(_params).then(response => {
                    console.log(response.data)
                    if (response.data.err == 0) {
                        this.prolist = response.data.data;
                    } else {
                        this.prolist = []
                        this.$Message.error(response.data.info);
                    }
                    resolve();
                }).catch(error => {
                    reject(error);
                });
            });
        },
        toogleType_code(index) {
            this.type_code = index
            this.getPro()
        },
        selectCompany() {
            this.companyModal = true
        },
        changeCompany(cid,name) {
            this.com_id = cid
            this.com_name = name
            this.companyModal = false
            this.getPro()
        },
        getDetail() {
            if(this.$route.params.id != 0){
                let _params = {
                    num:this.$route.params.id
                }
                new Promise((resolve, reject) => {
                    getPolicyDetail(_params).then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.policyDetail = response.data.data;
                            if(this.policyDetail.inception_date){
                                this.policyDetail.inception_date_format = this.policyDetail.inception_date;
                                this.inceptionDate = new Date(this.policyDetail.inception_date)
                            }
                            // this.policyDetail.insured.forEach(function(value,index){
                            //     value.insurance.forEach(function(v,k){
                            //          v.inception_date_format = v.inception_date;
                            //          v.inception_date = new Date(v.inception_date)
                            //     })
                            // })
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
            }
           
        },

        //添加被保人
        insuredAdd() {
            this.policyDetail.insured.push(
                {
                    benefit: [
                        {
                            benefitName: '',
                            benefitShare: '',
                            benefitOrder: ''
                        }
                    ],
                    insurance: [
                        {
                            insuranceName: '',
                            insurancePeriod: '',
                            amount: '',
                            payPeriod: '',
                            rate: '',
                            commission_rate: '',
                            interest:[
                                {
                                    interestName:'',
                                    interestMoney:''
                                }
                            ]
                        }
                    ]
                }
            );
        },
        // 删除被保人
        insuredRemove(pindex) {
            this.policyDetail.insured.splice(pindex, 1);
        },
        //添加受益人
        benefitAdd(pindex) {
            this.policyDetail.insured[pindex].benefit.push({
                value: ''
            });
        },
        //删除受益人
        benefitRemove(pindex, index) {
            this.policyDetail.insured[pindex].benefit.splice(index, 1);
        },
        //添加险种
        proAdd(pindex) {
            this.policyDetail.insured[pindex].insurance.push({
                interest:[
                    {
                        interestName:'',
                        interestMoney:''
                    }
                ]
            });
        },
        // 删除险种
        proRemove(pindex, index) {
            this.policyDetail.insured[pindex].insurance.splice(index, 1);
        },
        //添加保险责任
        interestAdd(pindex,index) {
            this.policyDetail.insured[pindex].insurance[index].interest.push({
                interestName:'',
                interestMoney:''
            });
        },
        //删除保险责任
        interestRemove(pindex,index,sindex) {
            this.policyDetail.insured[pindex].insurance[index].interest.splice(sindex, 1);
        },
        //提交保存
        handleSubmit() {
            //  this.$refs[this.employeeDetail].validate((valid) =>{
            //     if (valid) {
                    new Promise((resolve, reject) => {
                        savePolicy(this.policyDetail).then(response => {
                            if (response.data.err == 0) {
                                // this.$router.push({name:'policy_list'})
                                this.$router.go(-1);
                                
                            } else {
                                this.$Message.error(response.data.info);
                            }
                            resolve();
                        }).catch(error => {
                            reject(error);
                        });
                    });
            //     } 
            // });
        },
        // 监测datepicker的on-change时间，date为返回值，是格式化后的日期
        signDateChange(date) {
            this.policyDetail.sign_date_format = date;
        },
        inceptionDateChange(date) {
            this.policyDetail.inception_date_format = date;
        },
        insureInceptionDateChange(date, pindex,index) {
            this.policyDetail.insured[pindex].insurance[index].inception_date_format = date;
        },
        //搜索客户
        searchCustomer(){
            this.getCustomer();
        },
        //导入投保人
        insertApp(){
            this.insertType = 1;
            this.insertModal = true;
        },
        //导入被保人
        insertInsured(insuredIndex){
            this.insertType = 2;
            this.insertinsuredIndex = insuredIndex;
            this.insertModal = true;
        },
        //导入受益人
        insertBenefit(insuredIndex,benefitIndex){
            this.insertType = 3;
            this.insertinsuredIndex = insuredIndex;
            this.insertBenefitIndex = benefitIndex;
            this.insertModal = true;
        },
        getCustomer(){
            let _params={
                true_name:this.modalSearch.name
            };
            new Promise((resolve, reject) => {
                    getCustomerBasic(_params).then(response => {
                        console.log(response.data)
                        if (response.data.err == 0) {
                            this.data_customer = response.data.data
                        } else {
                            this.$Message.error(response.data.info);
                        }
                        resolve();
                    }).catch(error => {
                        reject(error);
                    });
                });
        },
        //插入客户数据
        insertData(true_name,mobile,id_card){
            if(this.insertType == 1) {
                this.policyDetail.applicant.appName = true_name;
                this.policyDetail.applicant.appMobile = mobile;
                this.policyDetail.applicant.appNum = id_card;
                this.insertModal = false;
            } else if(this.insertType == 2) {
                this.policyDetail.insured[this.insertinsuredIndex].insuredName = true_name;
                this.policyDetail.insured[this.insertinsuredIndex].mobile = mobile;
                this.policyDetail.insured[this.insertinsuredIndex].insuredNum = id_card;
                this.insertModal = false;
            } else if(this.insertType == 3) {
                this.policyDetail.insured[this.insertinsuredIndex].benefit[this.insertBenefitIndex].benefitName = true_name;
                this.policyDetail.insured[this.insertinsuredIndex].benefit[this.insertBenefitIndex].benefitNum = id_card;
                this.insertModal = false;
            }
            
        }
    }
}
</script>
